<template>
  <div class="goods">
      <!-- 二级导航 -->
    <div class="nav">
      <div class="title">分类</div>
      <div class="card" >
        <div class="total">
          <el-button @click="back">
            <span class="size">所有</span>
          </el-button>
        </div>
        <div v-for="item in mallList" class="cardItem"
             :key="item.id"
             :label="item.name">
          <el-dropdown >
              <span >
                {{item.name}}
              </span>
                    <template #dropdown >
                      <el-dropdown-menu >
                        <div v-for="i in item.children"
                              :key="i.id"
                              :label="i.name">
                          <el-dropdown-item @click="getGoods(i.id)">{{i.name}}</el-dropdown-item>
                        </div>
                      </el-dropdown-menu>
                    </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    <!--  主要内容区域,专门内容搜索-->
    <div class="main">
      <div class="MallCard">
        <el-card class="box-card"  v-for="item in goodsList" :key="item">
          <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
          <!--            得有一个显示:更多 的功能-->
          <div class="DataLi">
            <img :src="item.cover">
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="top">
                <template #content>{{item.name}}</template>
                <div class="name">名称：{{item.name}}</div>
              </el-tooltip>
            <div>价格：{{item.price}}</div>
          </div>
          <el-button type="primary" @click="$router.push('/productsDetail?id=' + item.id)">详情</el-button>
        </el-card>
      </div>
    </div>
    <!--    分页功能,来自element ui-->
    <div class="pagination" style="margin-top: 20px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "../../../../front_admin/src/utils/request";
export default {
  data(){
    return {
      mallList: [],
      dropdownMenu:[],
      goodsList:[],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 12,
        // name: '',
      },
    }
  },
  created() {
    this.load()
    this.getGoods(0)
  },
  methods:{
    load(){
      request.get('/producttype/page',{
        params: this.params
      }).then(res => {
        if(res.code === '200'){
          //mallList.value获取第一层级
          this.mallList= res.data.list

        }
      })
    },
    getGoods(id){
      let iParams = {}
      if(id == 0){
        iParams = this.params
      } else {
        iParams = {
          categoryId:id,
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
        }
      }
      request.get('/products/page',{
        params: iParams
      }).then(res => {
        // console.log("res内",res)
        if(res.code === '200'){
          //mallList.value获取第一层级
          this.goodsList = res.data.list
          this.total = res.data.total

          console.log("获取到的goodsList的value数据是",this.goodsList)
        }
      })
    },
    handleCurrentChange(pageNum){
      //  点击分页按钮实现分页
      this.params.pageNum=pageNum
      this.getGoods()
    },
    back(){
      this.load()
      this.getGoods(0)
    }
  }
}
</script>

<style scoped>
.goods {
  background-color: #f5f5f5;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
/* 分类标签CSS */
.goods{
  margin:0 auto;

}
.nav {
  /*background-color: white;*/
  display: flex;
  margin:15px auto;
  width: 60%;
  justify-content:flex-start;
}

.title{
  color: black;
  font-size: 16px;
  font-weight: bold;
  width: 150px;
  margin-top: 14px;
}
.main{
  display: flex;
  /*float: left;*/
  width:90%;
  margin:15px auto;
  justify-content: center;
}

.MallCard{
  display: flex;
  float: left;

  flex-wrap: wrap;
  width: 1000px;
}
.box-card{
  width: 32%;
  /*padding: 10px;*/
  margin-bottom: 15px;
  margin-right: 10px;
}
.box-item {
  width: 110px;
  margin-top: 10px;
}


.name{
  overflow:hidden;
  text-overflow:ellipsis;
  /*文本不换行,超出一行被截取*/
  white-space:nowrap;
}
.DataLi img{
  width: 250px;
  height: 250px;
}
.card{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
}
.cardItem{
  margin-right: 20px;
}
:focus{
  outline:0;
}
.pagination{
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.total{
  color: #606266;
  font-size: 15px;
  margin-top:-5px;
  margin-right: 10px;
}

.total button{
  /* 清除默认边框 */
  border:0;
  outline:none;
  /*清除默认背景 */
  background-color: transparent;
}
.size{
  font-size: 15px;
}
</style>